<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8" />
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/mygrxx.css" />
    <link rel="stylesheet" type="text/css" href="/css/sweetalert.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>

</head>
<body>
<!------------------------------head------------------------------>
<div th:replace="header :: html"></div>
<!------------------------------idea------------------------------>
<div class="address mt">
    <div class="wrapper clearfix">
        <a href="index.html" class="fl">首页</a>
        <span>/</span>
        <a href="mygxin.html" class="on">个人信息</a>
    </div>
</div>

<!------------------------------Bott------------------------------>
<div class="Bott">
    <div class="wrapper clearfix">
        <div th:replace="boot :: html"></div>
        <div class="you fl">
            <h2>个人信息</h2>
            <div class="gxin">
                <div class="tx"><a href="javascript:void(0)"><img th:src="${session.user.avatar}" class="mygrxxImage"/><p id="avatar">修改头像</p></a></div>
                <div class="xx">
                    <h3 class="clearfix"><strong class="fl">基础资料</strong><a href="javascript:void(0)" class="fr" id="edit1">编辑</a></h3>
                    <div id="mygrxxname" th:text="'用户名：'+${session.user.username}"></div>
                    <div id="mygrxxbirthday" th:text="'创建时间：'+${session.user.createTimeStr}"></div>
                    <div id="mygrxxdescribes" th:text="'描述：'+${session.user.describes}"></div>
                    <div id="mygrxxsex" th:text="'性别：'+${session.user.sex==0?'女':'男'}"></div>
                    <div id="mygrxxphone" th:text="'电话号码：'+${session.user.phone}"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--遮罩-->
<div class="mask"></div>
<!--编辑弹框-->
<div class="bj">
    <div class="clearfix"><a href="javascript:void(0)" class="fr gb"><img src="/img/icon4.png"/></a></div>
    <h3>编辑基础资料</h3>
    <form  method="post" id="updatexx" class="layui-form">
        <p><label>生日：</label><input type="text"  lay-verify="date" id="bjbirthday"  name="createTime" th:value="${session.user.createTimeStr}" /></p>
        <p><label>手机：</label><input type="text"  lay-verify="phone" id="bjphone"  name="phone" th:value="${session.user.phone}" /></p>
        <p><label>描述：</label><input type="text" lay-verify="required" id="bjdescribcs"  name="describes" th:value="${session.user.describes}" /></p>
         <input type="radio"  name="sex" value="1" checked/>男
         <input type="radio" name="sex" value="0"/>女
        <div class="bc">
            <input type="submit" value="保存" lay-submit lay-filter="updatemessgae"  />
            <input type="button" value="取消"  />
        </div>
        <input type="hidden" th:value="${session.user.userId}" lay-verify="required" name="userId">
    </form>
</div>
<!--修改头像-->
<div class="avatar">
    <div class="clearfix"><a href="javascript:void(0)" class="fr gb">
        <img src="/img/icon4.png"/>
    </a></div>

        <div class="layui-upload-drag" id="upload" style="margin-left: 17%">
            <i class="layui-icon" id="test"></i>
            <p>点击上传，或将文件拖拽到此处</p>
        </div>

        <input type="submit" value="提交" id="uploadimage" style="margin-top:20px;width: 120px;height:35px;color: #fff;background: #ddd;cursor: pointer;margin-left:35%;"/>

</div>

<!--返回顶部-->
<div th:replace="gotop :: html"></div>
<!--footer-->
<div th:replace="footer :: html"></div>
<script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/user.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/sweetalert.min.js" type="text/javascript"></script>

<script>
    $('.mygrxxImage').click(function(){
        var img=$(this)[0].src;
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '700px',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img src='+img+' width="100%">'
        });
    });
    layui.use('upload', function(){
        let upload=layui.upload;
        //拖拽上传
        upload.render({
            elem: '#upload'
            ,url: '/user/uploadImage'
            ,auto: false
            ,bindAction: '#uploadimage'
            ,accept: 'images' //图片
            ,size: 2*1024 //限制文件大小，单位 KB
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.msg('图片上传中，请稍后', {
                    icon: 16,
                    time:0
                    ,shade:  [0.8, '#393D49']
                });
            }
            ,done: function(res, index, upload){
                if (res.code===200){
                    layer.msg("图片上传成功",{time:2000,offset: '100px',icon:1});
                    layer.closeAll('loading'); //关闭loading
                    setTimeout (function () {
                        location.reload();
                    },500);
                } else{
                    layer.msg(res.message,{offset: '100px',icon:2});
                }
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
            }
        });
    });

    $("#updatexx").submit(function () {
        $.ajax({
           type:'post',
           url:'/user/updateMessage',
           data:$("#updatexx").serialize(),
           dataType: "json",
           success:function (data) {
                if (data.code===200){
                    layer.msg("修改成功",{time:2000,offset: '100px',icon:1});
                    setTimeout (function () {
                        location.reload();
                    },500);
                } else{
                    layer.msg(data.message,{offset: '100px',icon:2});
                }
           }
    });
        return false;
    });
</script>
<script th:inline="javascript">
    /*<![CDATA[*/
        let sex=[[${session.user.sex}]];
        $("input[type=radio][name=sex][value="+sex+"]").attr("checked",'true')
    /*]]>*/
</script>
</body>
</html>
